<template>
  <div class="async-task-notifications">
    <transition-group name="notification" tag="div">
      <div 
        v-for="task in activeTasks" 
        :key="task.id" 
        class="task-notification"
        :class="{ 'task-completed': task.status === 'COMPLETED', 'task-failed': task.status === 'FAILED' }"
      >
        <div class="notification-icon">
          <n-spin v-if="task.status === 'RUNNING'" size="small" />
          <n-icon v-else-if="task.status === 'COMPLETED'" color="#52c41a" size="18">
            <CheckmarkCircle />
          </n-icon>
          <n-icon v-else-if="task.status === 'FAILED'" color="#ff4d4f" size="18">
            <CloseCircle />
          </n-icon>
          <n-icon v-else color="#1890ff" size="18">
            <TimeOutline />
          </n-icon>
        </div>
        
        <div class="notification-content">
          <div class="notification-title">{{ task.title }}</div>
          <div class="notification-message">{{ task.message }}</div>
          <div v-if="task.status === 'RUNNING'" class="notification-progress">
            <div class="progress-bar">
              <div 
                class="progress-fill" 
                :style="{ width: `${task.progress}%` }"
              ></div>
            </div>
            <span class="progress-text">{{ task.progress }}%</span>
          </div>
        </div>
        
        <div class="notification-actions">
          <n-button 
            v-if="task.status === 'RUNNING'" 
            text 
            size="small" 
            @click="handleCancel(task)"
          >
            取消
          </n-button>
          <n-button 
            v-if="task.status === 'COMPLETED' || task.status === 'FAILED'" 
            text 
            size="small" 
            @click="handleRemove(task.id)"
          >
            关闭
          </n-button>
        </div>
      </div>
    </transition-group>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import { NButton, NIcon, NSpin } from 'naive-ui'
import { useMessage } from 'naive-ui'
import { CheckmarkCircle, CloseCircle, TimeOutline } from '@vicons/ionicons5'
import { useTaskManager } from '../../shared/services/task-manager-service'

// 使用任务管理服务
const { activeTasks, removeTask } = useTaskManager()
const message = useMessage()

// 定时清理已完成的任务
let cleanupTimer: NodeJS.Timeout | null = null

// 取消任务
const handleCancel = async (task: any) => {
  try {
    // 这里可以调用取消任务的API
    // await cancelTask(task.id)
    
    // 暂时只是从列表中移除
    removeTask(task.id)
    message.info(`已取消任务: ${task.title}`)
  } catch (error) {
    console.error('取消任务失败:', error)
    message.error('取消任务失败')
  }
}

// 移除任务
const handleRemove = (taskId: string) => {
  removeTask(taskId)
}

// 定期清理已完成的任务
const startCleanupTimer = () => {
  cleanupTimer = setInterval(() => {
    // 清理任务会在任务管理服务内部处理
  }, 30000) // 每30秒检查一次
}

// 停止清理定时器
const stopCleanupTimer = () => {
  if (cleanupTimer) {
    clearInterval(cleanupTimer)
    cleanupTimer = null
  }
}

// 组件挂载时启动定时器
onMounted(() => {
  startCleanupTimer()
})

// 组件卸载时清理定时器
onUnmounted(() => {
  stopCleanupTimer()
})
</script>

<style scoped>
.async-task-notifications {
  position: fixed;
  top: 20px;
  right: 20px;
  /* 移除 z-index: 1000; */
  max-width: 400px;
  width: 100%;
}

.task-notification {
  background: white;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: flex-start;
  border-left: 4px solid #1890ff;
  transition: all 0.3s ease;
}

.task-notification.task-completed {
  border-left-color: #52c41a;
}

.task-notification.task-failed {
  border-left-color: #ff4d4f;
}

.notification-icon {
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-message {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  line-height: 1.4;
}

.notification-progress {
  display: flex;
  align-items: center;
}

.progress-bar {
  flex: 1;
  height: 6px;
  background-color: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
  margin-right: 8px;
}

.progress-fill {
  height: 100%;
  background-color: #1890ff;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 12px;
  color: #666;
  min-width: 35px;
}

.notification-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: 8px;
}

/* 动画效果 */
.notification-enter-active,
.notification-leave-active {
  transition: all 0.3s ease;
}

.notification-enter-from {
  opacity: 0;
  transform: translateX(100%);
}

.notification-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

.notification-move {
  transition: transform 0.3s ease;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .async-task-notifications {
    right: 10px;
    left: 10px;
    max-width: none;
  }
  
  .task-notification {
    padding: 12px;
  }
  
  .notification-title {
    font-size: 14px;
  }
  
  .notification-message {
    font-size: 12px;
  }
}
</style>